<template>
  <div class="materialManagementCont">
    <div class="con">
      <div class="cityFillter">
        <span>所属城市：</span>
        <Cascader :data="cityAttrSort" placeholder="请选择城市" v-model="city"
          :load-data="loadDataCity" @on-change="cityChange"></Cascader>
      </div>

      <Tabs type="card" :value="tabName" @on-click="tabChange">
        <TabPane label="待审核" name="0"></TabPane>
        <TabPane label="已通过" name="1"></TabPane>
        <TabPane label="已驳回" name="2"></TabPane>
      </Tabs>

      <dt-grid ref="table" :columns="columns" page :onFetch='onFetch' />
    </div>
    <Modal v-model="detailsFlag" title="文章详情" width="80%" :styles="{top:'5%'}"
      :footer-hide="true" @on-cancel="closeCancel">
      <article-Details v-if="detailsFlag" :articleDetailsInfo="articleDetailsInfo"
        @closeCancel="closeCancel"></article-Details>
    </Modal>
    <!--流程信息-->
    <process-modal ref="process" />
  </div>
</template>
<script>
  import columnsAll from './columns'
  import articleMgr from '@/biz/article/article.js'
  import articleDetails from './examineArticleDetail.vue'
  import caseMgr from '@/biz/crimeSceneList'
  import processModal from '@/components/biz/audit/process-modal.vue'
  import auditMgr from '@/biz/flowApproval/processAudit.js'
  export default {
    components: {
      articleDetails,
      processModal
    },
    data() {
      return {
        cityAttrSort: [],
        city: [],
        filterCityCode: '',
        articleDetailsInfo: {},
        detailsFlag: false,
        tabName: '0',
        loading: false,
        columns: []
      }
    },
    methods: {
      cityChange(val) {
        console.log(val, '城市选择')
        this.filterCityCode = val[1]
        this.$refs.table.fetch()
      },
      getAreacodePropertyList() {
        let params = {
          level: 2,
          page: '1',
          parentCode: '',
          rows: '100',
        }
        caseMgr.getAreacodePropertyList(params).then((res) => {
          this.cityAttrSort = res.list
          this.cityAttrSort.map((item) => {
            item.value = item.cityCode
            item.label = item.cityName
            item.loading = false
            item.children = []
          })
        })
      },
      //获取市
      loadDataCity(item, callback) {
        item.loading = true
        let params = {
          level: 3,
          page: '1',
          parentCode: item.value,
          rows: '100',
        }
        caseMgr.getAreacodePropertyList(params).then((res) => {
          res.list.map((itemL) => {
            itemL.value = itemL.cityCode
            itemL.label = itemL.cityName
            item.children.push(itemL)
          })

          item.loading = false
          callback()
        })
      },

      closeCancel() {
        this.detailsFlag = false
      },
      // 跳转文章详情
      labelTypeClick(val) {
        articleMgr.articleGet({ articleId: val.businessId })
          .then((res) => {
            if (res) {
              this.articleDetailsInfo = { ...res }
              this.detailsFlag = true
            } else {
              this.$Message.info('该文章已删除！')
            }
          })
          .catch((err) => {
            this.$Message.error(err)
          })
      },
      tabChange(val) {
        this.tabName = val
        this.columns = columnsAll.options(this)
        this.$refs.table.fetch(true)
      },

      onFetch(data) {
        return auditMgr.list({
          ...data,
          auditType: 13,
          cityId: this.filterCityCode,
          buttonType: this.tabName
        }).then(res => {
          res && res.list.forEach(item => {
            item = Object.assign(item, item.auditData)
          })
          return res
        })
      },

      // 审核 重新审核
      reviewFun(rows) {
        this.$router.push({
          path: '/flowApproval/legalViewArticleReview',
          query: { articleId: rows.businessId, auditId: rows.auditId },
        })
      },
      // 查看原因
      viewReason(row) {
        this.$Modal.info({
          title: '驳回原因',
          content: row.auditReason || '-',
          okText: '关闭',
        })
      },

      processFun(data) {
        this.$refs.process.show({
          businessId: data.businessId,
          auditType: 13
        })
      },

    },
    computed: {},
    created() {
      this.tabName = '0'
      this.getAreacodePropertyList()
    },
    mounted() {
      this.columns = columnsAll.options(this)
      this.$refs.table.init(this)
      this.$refs.table.fetch()
    },

  }
</script>
<style lang="scss" scoped>
  .materialManagementCont {
    padding-top: 10px;
    padding: 10px;
  }

  .con {
    position: relative;
  }

  .cityFillter {
    line-height: 32px;
    width: 400px;
    margin: 0 0 15px;
    z-index: 99;
    display: flex;
  }
</style>